<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <title>分压器计算器</title>
</head>

<body class="bg-gray-100 font-sans">
    <div class="container mx-auto p-8">
        <h1 class="text-3xl font-bold text-center text-blue-600 mb-4">分压器计算器</h1>
        <p class="text-center text-gray-700 mb-8">该工具用于计算电阻分压器电路的输出电压、电阻功耗以及电流，可实现既定阻值和电源电压组合的功能。</p>
        <div class="bg-white p-8 rounded shadow-md max-w-md mx-auto">
            <div class="mb-4">
                <label for="voltageInput" class="block text-gray-700 font-bold mb-2">电压输入 (V1)：</label>
                <div class="flex">
                    <input type="number" id="voltageInput" class="border border-gray-300 p-2 w-full rounded-l"
                        placeholder="请输入电源电压">
                    <span class="bg-gray-200 px-2 py-2 rounded-r">V</span>
                </div>
            </div>
            <div class="mb-4">
                <label for="resistor1" class="block text-gray-700 font-bold mb-2">第1个电阻值 (R1)：</label>
                <div class="flex">
                    <input type="number" id="resistor1" class="border border-gray-300 p-2 w-full"
                        placeholder="请输入第一个电阻阻值">
                    <select id="resistor1Unit" class="border border-gray-300 p-2 rounded-r">
                        <option value="1">Ω</option>
                        <option value="1000">kΩ</option>
                        <option value="1000000">MΩ</option>
                    </select>
                </div>
            </div>
            <div class="mb-6">
                <label for="resistor2" class="block text-gray-700 font-bold mb-2">第2个电阻值 (R2)：</label>
                <div class="flex">
                    <input type="number" id="resistor2" class="border border-gray-300 p-2 w-full"
                        placeholder="请输入第二个电阻阻值">
                    <select id="resistor2Unit" class="border border-gray-300 p-2 rounded-r">
                        <option value="1">Ω</option>
                        <option value="1000">kΩ</option>
                        <option value="1000000">MΩ</option>
                    </select>
                </div>
            </div>
            <button id="calculateButton"
                class="bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300 w-full">计算</button>
            <div class="mt-6">
                <p class="text-gray-700 font-bold">电压输出 (Vout)：</p>
                <div class="flex items-center">
                    <span class="mr-2">=</span>
                    <input type="text" id="outputVoltage"
                        class="border border-gray-300 p-2 w-full rounded bg-gray-100" readonly>
                    <span class="bg-gray-200 px-2 py-2 rounded-r">V</span>
                </div>
            </div>
            <div class="mt-4">
                <p class="text-gray-700 font-bold">R1 功耗：</p>
                <div class="flex items-center">
                    <span class="mr-2">=</span>
                    <input type="text" id="powerR1"
                        class="border border-gray-300 p-2 w-full rounded bg-gray-100" readonly>
                    <span id="powerR1Unit" class="bg-gray-200 px-2 py-2 rounded-r">W</span>
                </div>
            </div>
            <div class="mt-4">
                <p class="text-gray-700 font-bold">R2 功耗：</p>
                <div class="flex items-center">
                    <span class="mr-2">=</span>
                    <input type="text" id="powerR2"
                        class="border border-gray-300 p-2 w-full rounded bg-gray-100" readonly>
                    <span id="powerR2Unit" class="bg-gray-200 px-2 py-2 rounded-r">W</span>
                </div>
            </div>
            <div class="mt-4">
                <p class="text-gray-700 font-bold">电路电流：</p>
                <div class="flex items-center">
                    <span class="mr-2">=</span>
                    <input type="text" id="current"
                        class="border border-gray-300 p-2 w-full rounded bg-gray-100" readonly>
                    <span class="bg-gray-200 px-2 py-2 rounded-r">A</span>
                </div>
            </div>
        </div>
    </div>
    <script>
        const calculateButton = document.getElementById('calculateButton');
        const voltageInput = document.getElementById('voltageInput');
        const resistor1 = document.getElementById('resistor1');
        const resistor2 = document.getElementById('resistor2');
        const resistor1Unit = document.getElementById('resistor1Unit');
        const resistor2Unit = document.getElementById('resistor2Unit');
        const outputVoltage = document.getElementById('outputVoltage');
        const powerR1 = document.getElementById('powerR1');
        const powerR2 = document.getElementById('powerR2');
        const powerR1Unit = document.getElementById('powerR1Unit');
        const powerR2Unit = document.getElementById('powerR2Unit');
        const current = document.getElementById('current');

        calculateButton.addEventListener('click', function () {
            const v1 = parseFloat(voltageInput.value);
            const r1Value = parseFloat(resistor1.value);
            const r2Value = parseFloat(resistor2.value);
            const r1Unit = parseFloat(resistor1Unit.value);
            const r2Unit = parseFloat(resistor2Unit.value);

            const r1 = r1Value * r1Unit;
            const r2 = r2Value * r2Unit;

            if (!isNaN(v1) && !isNaN(r1) && !isNaN(r2)) {
                const vout = (v1 * r2) / (r1 + r2);
                outputVoltage.value = vout.toFixed(2);

                const i = v1 / (r1 + r2);
                current.value = i.toFixed(6);

                const p1 = i * i * r1;
                const p2 = i * i * r2;

                if (p1 < 1) {
                    powerR1.value = (p1 * 1000).toFixed(2);
                    powerR1Unit.textContent = 'mW';
                } else {
                    powerR1.value = p1.toFixed(2);
                    powerR1Unit.textContent = 'W';
                }

                if (p2 < 1) {
                    powerR2.value = (p2 * 1000).toFixed(2);
                    powerR2Unit.textContent = 'mW';
                } else {
                    powerR2.value = p2.toFixed(2);
                    powerR2Unit.textContent = 'W';
                }
            } else {
                outputVoltage.value = '输入无效，请输入有效的数字。';
                powerR1.value = '';
                powerR2.value = '';
                current.value = '';
                powerR1Unit.textContent = 'W';
                powerR2Unit.textContent = 'W';
            }
        });
    </script>
</body>

</html>
    